<template>
  	<div>

        <div class="top">
            <DatePicker
                :clearable="clearable"
                format="yyyy-MM-dd"
                type="daterange"
                placeholder="请选择起止时间"
                style="width: 400px"
                :value="time"
                :options="options"
                @on-change="change2"
            ></DatePicker>
            <RadioGroup v-model="saleOpenid" type="button" @on-change="change1">
                <Radio label="">全部</Radio>
                <template v-for="item in radioList">
                    <Radio :label="item.openid">{{item.name}}</Radio>
                </template>
            </RadioGroup>
        </div>

        <Modal v-model="modal" title="登陆" width="30">
          <Form ref="form" :label-width="90">
            <FormItem label="访问密钥：">
              <Input placeholder="请输入访问密钥" v-model="password" clearable></Input>
            </FormItem>
          </Form>
          <div slot="footer">
              <Button class="Button" type='primary' @click="submit">登陆</Button>
            </div>
        </Modal>

    	<Table :loading="loading" style="margin:20px" :columns="columns" :data="data"></Table>

  	</div>
</template>

<script>
import axios from 'axios'
export default {
  	data() {
    	return {
    		loading: false,
        modal: true,
        password: '',
    		data: [],
            clearable: false,
            radioList: [],
            time: [],
            options: {
                disabledDate(date) {
                  return date && date.valueOf() > Date.now()
                },
                shortcuts: [
                  {
                    text: "近7天",
                    value() {
                      const end = new Date();
                      const start = new Date();
                      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                      return [start, end];
                    }
                  },
                  {
                    text: "近30天",
                    value() {
                      const end = new Date();
                      const start = new Date();
                      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                      return [start, end];
                    }
                  },
                  {
                    text: "近90天",
                    value() {
                      const end = new Date();
                      const start = new Date();
                      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                      return [start, end];
                    }
                  },
                  {
                    text: "近180天",
                    value() {
                      const end = new Date();
                      const start = new Date();
                      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                      return [start, end];
                    }
                  },
                  {
                    text: "近360天",
                    value() {
                      const end = new Date();
                      const start = new Date();
                      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                      start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
                      return [start, end];
                    }
                  }
                ]
            },
            end: "",
            saleOpenid: "",
            start: "",
    		columns1: [
                { title: "场馆名称", key: "museumName", align: "center" },
                { title: "业务员", key: "saleName", align: "center" },
                {
                  title: "是否上线",
                  align: "center",
                  key: "online2",
                  render: (h, params) => {
                    const color = params.row.online2 == "已上线" ? "primary" : "error";
                    return h(
                      "Tag",
                      {
                        props: { type: "dot", color: color }
                      },
                      params.row.online2
                    );
                  }
                },
                { title: "联系方式", key: "phone", align: "center" },
    			{ title: "注册时间", key: "gmtCreate", align: "center" },
                { title: "场馆ID", key: "museumId", align: "center" },
    		],
            columns2: [
                { title: "场馆名称", key: "museumName", align: "center" },
                {
                  title: "是否上线",
                  align: "center",
                  key: "online2",
                  render: (h, params) => {
                    const color = params.row.online2 == "已上线" ? "primary" : "error";
                    return h(
                      "Tag",
                      {
                        props: { type: "dot", color: color }
                      },
                      params.row.online2
                    );
                  }
                },
                { title: "联系方式", key: "phone", align: "center" },
                { title: "注册时间", key: "gmtCreate", align: "center" },
                { title: "场馆ID", key: "museumId", align: "center" },
            ],



    	}
    },
    created(){
      this.modal = true
    },
    methods:{


        getSales() {
            let that = this
            axios({
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                },
                method: 'get',
                baseURL: 'https://api-greencodescreen.bowu66.com/',
                url: '/api/invitation/getSales',
                params: {},
            }).then((res) => {
                this.radioList = res.data
            }).catch((error) => {
                that.$Message.error("请求超时");
            })
        },

        submit(){
          if(this.password != 'bowuwenhua'){
            this.$Message.error("密钥错误");
            return false
          }
          this.modal = false
          this.columns = this.columns1
          this.getSales()
          this.getInvitationDTO()
        },

    	
    	getInvitationDTO() {
	      	this.loading = true;
            let that = this
            axios({
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                },
                method: 'post',
                baseURL: 'https://api-greencodescreen.bowu66.com/',
                url: '/api/invitation/getInvitationDTO',
                data: {
                    end: this.time[1] == undefined ? '' : this.time[1],
                    saleOpenid: this.saleOpenid,
                    start: this.time[0] == undefined ? '' : this.time[0],
                },
            }).then((res) => {
                that.data = res.data
                that.loading = false;
                for(let i=0;i<that.data.length;i++){
                    if(res.data[i].online){
                        res.data[i].online2 = '已上线'
                    }else{
                        res.data[i].online2 = '未上线'
                    }
                    res.data[i].gmtCreate = that.getTime2(res.data[i].gmtCreate)
                }
            }).catch((error) => {
                that.$Message.error("请求超时");
                that.loading = false;
            })
    	},

        change1(){
            if(this.saleOpenid == ''){
                this.columns = this.columns1
            }else{
                this.columns = this.columns2
            }
            this.getInvitationDTO()
        },

        change2(data){
            this.time = data
            this.getInvitationDTO()
        },

    	



    }
}
</script>

<style scoped>
    .top{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin:20px 20px 0 20px;
    }
</style>